<!DOCTYPE html>
<!-- 设置页面语言 -->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标签的标题 -->
    <title>云道首页</title>

    <style>
        /* div{
            border: 1px solid black;
        } */
        /* 整个头部 */
        .header{
            width: 1227px;
            height: 100px;
            /* 设置居中  margin 用于设置外边距  如果只有一个值设置的是上下左右都是0*/
            /* 设置两个值  第一个值是上下边距，第二个是左右 */
            /* 左右设置为自动  那么就会平分 达到居中的效果 */
            margin: 0px auto;
        }
        /* 头部中的图标 */
        .icon {
            float: left;
            width: 223px;
            height: 100px;
        }
        /* 头部中的导航 */
        .nav{
            /* 浮动 */
            float: right;
            width: 1000px;
            height: 100px;
        }
        .nav li{
            /* 取出ul前面的点 */
            list-style: none;
            float: left;
            margin: 20px 75px;
            /* 修改字体大小 */
            font-size: 20px;
        }
        /* 伪类 */
        li:hover{
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 头部div -->
    <div class="header">
        <div class="icon">
            <!-- 图片 img标签  src代表路径   alt代表提示 -->
            <!-- 图片路径需要后缀   最好是使用相对路径 
                使用网络图片 http://xxxxx.jpg
                绝对路径  E://xxxxx.jpg  (只能自己电脑看到)
            -->
            <img src="img/logo.png" alt="图片未加载成功">
        </div>
        <div class="nav">
            <ul>
                <li>首页</li>
                <li>商城</li>
                <li>平台</li>
                <li>联盟</li>
                <li>关于</li>
            </ul>
        </div>
    </div>
</body>
</html>